{extend name="base/base" /}
{block name="main"}
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input searchVal" placeholder="请输入账号或昵称"/>
                </div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input starttime" placeholder="开始时间"/>
                </div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input endtime" placeholder="结束时间"/>
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
                <a class="layui-btn down_btn" data-type="reload">下载</a>
            </div>
        </form>
    </blockquote>
    <table id="usersList" lay-filter="usersList"></table>
    <!--操作-->
    <script type="text/html" id="usersListBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
</form>
{/block}
{block name="script"}
<script>
    layui.use(['form', 'laydate', 'table'], function () {
        var form = layui.form, $ = layui.jquery, laydate = layui.laydate, table = layui.table;
        //执行一个laydate实例
        laydate.render({
            elem: '.starttime', //指定元素
            type: 'datetime',
        });
        laydate.render({
            elem: '.endtime', //指定元素
            type: 'datetime',
        });

        //新闻列表
        var tableIns = table.render({
            elem: '#usersList',
            url: "{:url('/admin/log')}",
            cellMinWidth: 95,
            page: true,
            limit: 10,
            limits: [5, 10, 15, 20],
            height: "full-125",
            id: 'usersListTable',
            cols: [[
                {field: 'uid', title: 'uid', width: 60, align: "center"},
                {field: 'user', title: '账号', width: 350},
                {field: 'name', title: '昵称', align: 'center'},
                {field: 'last_login_ip', title: '最后登录IP', align: 'center'},
                {field: 'create_time', title: '登陆时间', align: 'center'}
            ]]
        });

        //搜索【此功能需要后台配合，所以暂时没有动态效果演示】
        $(".search_btn").on("click", function () {
            table.reload("usersListTable", {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    key: $(".searchVal").val(),  //搜索的关键字
                    starttime: $(".starttime").val(),  //开始时间
                    endtime: $(".endtime").val()  //结束时间
                }
            })
        });
        //下载Excel
        $(".down_btn").on("click", function () {
            var  key = $(".searchVal").val();  //搜索的关键字
            var  starttime = $(".starttime").val();  //开始时间
            var  endtime = $(".endtime").val();  //结束时间
            location.href= "{:url('/admin/downlog')}" + '?key=' + key + '&starttime=' + starttime + '&endtime=' + endtime;
        });

    })
</script>
{/block}
